<html>
<head>
    <meta charset="utf8">
</head>
<body onload="get()">

    <h1>待办事项清单</h1>

    <input type="text" placeholder="添加事项" size="20" id="create"><input type="button" value="+" id="add" onclick="submit()">
    <input type="text" placeholder="删除事项" size="20" id="delete"><input type="button" value="-" id="del" onclick="del()">

    <ul id="todolist">
    </ul>

    <script>
        // 展示
        function get() {

            fetch('/todos')
                .then(
                    response => response.json()
                )
                .then(
                    function (data) {
                        document.getElementById('todolist').innerHTML = "";
                        var list = data.todos
                        console.log(list)

                        for (var i = 0; i < list.length; i++) {
                            if(!list[i].completed){
                                document.getElementById('todolist').innerHTML += '<li><input type="checkbox" name="' + list[i].id + '" onchange="is_finish(this.name)" >' + list[i].id + ',<span>' + list[i].title + '</span></li>'
                            }
                        }

                    }
                )

                .catch(
                    err => console.log('程序错误', err)
                )
        }
        
        // 添加
        function submit() {
            var title = document.getElementById('create').value

            var url = '/todos'
            var headers = {
                "Content-Type": "application/x-www-form-urlencoded"
            }
            fetch(url,
                {
                    method: 'POST',
                    body: 'title=' + title,
                    headers: headers
                })
                .then(
                    res => res.json()
                )
                .then(
                    function (ele) {
                        console.log(ele);
                        get()
                    }
                )
        }


        // 标记为完成
        function is_finish(id) {
            fetch('/todos/mark_completed' + '?todo_id=' + id)
                .then(
                    response => response.json()
                )
                .then(
                    function (x) {
                        if ('title' in x) {
                            get()
                        }
                    }
                )
        }

        // 删除
        function del() {
            var id = document.getElementById('delete').value;
            var url = '/todos/delete_todo'
            var headers = {
                "Content-Type": "application/x-www-form-urlencoded"
            }
            fetch(url,
                {
                    method: 'POST',
                    body: 'id=' + id,
                    headers: headers
                })

                .then(
                    response => response.json()
                )
                .then(
                    get()
                )
        }



    </script>

</body>

</html>